<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="12">
          <div class="grid-content colContent">
            <img src="../assets/logo.png" alt="">
            <span class="title">黑马商城</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card>
        <el-tabs type="card" stretch>
          <el-tab-pane label="帐号登录">
            <!-- 表单s -->

            <el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="LoginFormRules">
              <el-form-item prop="username">
                <el-input v-model.trim="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model.trim="loginForm.password" placeholder="密码" show-password prefix-icon="el-icon-lock"
                  @keyup.enter.native="onSubmit"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="btns" type="primary" @click="onSubmit">登录</el-button>
              </el-form-item>
            </el-form>
            <!-- 表单e -->
            <el-divider content-position="center">其它方式登录</el-divider>
            <el-row type="flex" justify="center">
              <i class="iconfont wb icon-weibo"></i>
              <i class="iconfont ins icon-instagram"></i>
              <i class="iconfont fb icon-facebook"></i>
              <i class="iconfont zfb icon-iconfonticons"></i>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="扫码登录" class='login-ewm-pane'>
            <div class="ewm">
              <img src="../assets/ewm.jpg" alt="">
            </div>
            <el-alert  center title="使用黑马商城扫一扫" description="在黑马商城点击「设置」>「扫描」扫码登录" type="success" :closable="false">
            </el-alert>

          </el-tab-pane>
        </el-tabs>
      </el-card>

    </el-main>
    <el-footer>
  <div class="footerLink">
    <span>简体</span>
    <el-divider direction="vertical"></el-divider>
    <span>繁体</span>
    <el-divider direction="vertical"></el-divider>
    <span>English</span>
    <el-divider direction="vertical"></el-divider>
    <span>常见问题</span>
    <el-divider direction="vertical"></el-divider>
    <span>隐私政策</span>
  </div>
  <p>小黑商城版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
    </el-footer>
  </el-container>

</template>
<script>

export default {
  props: [],
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      LoginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {

  },
  methods: {
    async  onSubmit () {
      this.$refs.loginFormRef.validate(async valid => {
        console.log(valid, 'valid')
        try {
          if (!valid) return
          const { data: res } = await this.$http.get('/login')
          const msg = res.data.data.find(t => {
            return (t.username === this.loginForm.username && t.passdord === this.loginForm.passdord)
          }
          )
          console.log(msg, 'msg')

          if (msg) {
            window.location.href = '/home'
            window.sessionStorage.setItem('isLogin', true)
          } else {
            this.$message.error('登录失败!')
          }
        } catch (error) {
          console.log(error)
        } finally {
          this.$refs.loginFormRef.resetFields()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-container {
  height: 100% !important;
}
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  height: 20% !important;
}
.el-header {
  height: 10% !important;
  .colContent {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 80px;
    }
    .title {
      display: inline-box;
      font-size: 2em;
      margin-left: 0.8em;
    }
  }
}
.el-main {
  background-image: linear-gradient(
    45deg,
    rgb(248, 255, 255),
    rgb(205, 241, 241)
  );
  position: relative;
  text-align: center;
  height: 70% !important;
  .el-card {
    width: 416px;
    height: 90%;
    right: 20%;
    bottom: 0;
    position: absolute;
    .el-form {
      margin-top: 80px;
      .el-input {
        margin-top: 10px;
      }
      .btns {
        background-color: rgb(44, 190, 146);
        border: 1px solid rgb(31, 236, 243);
        width: 100%;
      }
    }
    .el-divider {
      margin-top: 180px;
    }
    .el-row {
      padding-left: 30px;
      .iconfont {
        font-size: 30px;
        margin-right: 30px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        color: #fff;
      }
      .wb {
        background-color: rgb(177, 83, 83);
      }
      .ins {
        background-image: linear-gradient(
          45deg,
          rgb(248, 106, 106),
          rgb(167, 66, 235) ;
        );
        font-size: 20px;
      }
      .fb {
        background-color: rgb(24, 129, 228);
      }
      .zfb {
        background-color: rgb(12, 171, 235);
      }
    }
  }
  .login-ewm-pane {
      padding-top: 100px;
    .ewm {
      width: 200;
      height: 200px;
      margin-bottom: 50px;
      img {
        height: 100%;
      }
    }
  }
}
.el-footer{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
     color: rgb(141, 140, 140);
    .footerLink{
        color: rgb(141, 140, 140);
        span:hover{
            color:rgb(75, 75, 75)
        }

    }
}
</style>
